<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../assets/css/public.css">
  <link rel="stylesheet" href="../../assets/css/order.css">
</head>
<body>
<div class="return-box">
  <p><a href="javascript:history.go(-1)"><i align="center"><img src="../../assets/images/icon-back.png"></i><span>返回</span></a></p>
  <h1>门票订购</h1>
</div>
<div class="ticketOrder-box">
  <div class="blank gray-box"></div>
  <div class="ticket-info pa-l-r">
    <p><span>成人票</span><i>¥<b>560</b></i></p>
    <p><span>儿童票</span><i>¥<b>360</b></i></p>
  </div>
  <div class="blank gray-box"></div>
  <div class="pa-l-r">
    <h5>游客信息</h5>
    <div class="tourist-info">
      <!--   已添加的信息   -->
      <div class="title-box">
        <span>成人票</span>
        <button class="btn">删除</button>
      </div>
      <div class="tourist-details">
        <p>姓名：段玉 </p>
        <p>身份证号：4127**********3545</p>
      </div>
    </div>
  </div>
  <div class="add-box pa-l-r">
    <div class="blank"></div>
<!--    <h5>游客信息</h5>-->
    <!--添加成人-->
    <div class="add-adult add-info">
      <p>
        <span>成人票1</span>
        <i>
          <button class="confirm-btn btn">确认</button>
          <button class="btn cancel-btn">取消</button>
        </i>
      </p>
      <div class="select-box">
        <div>
          <input type="radio" name="adultInfo" id="adultAutomatic" />
          <label for="adultAutomatic">自动识别</label>
        </div>
        <div>
          <input type="radio" name="adultInfo" id="adultManual" checked />
          <label for="adultManual">手动输入</label>
        </div>
      </div>
      <div class="automatic-box spot-box" style="display:none;">
        <p>请将身份证放置在感应区</p>
      </div>
      <div class="spot-box manual-box">
        <div>
          <span>姓名：</span><input type="text" id="id_adult_name" placeholder="请输入本人身份证姓名">
        </div>
        <div>
          <span>身份证：</span><input type="text" id="id_adult_no" placeholder="请输入身份证号">
        </div>
      </div>
    </div>
    <!--添加儿童-->
    <div class="add-child add-info">
      <p><span>儿童票</span> <i><button class="confirm-btn btn">确认</button><button class="cancel-btn btn">取消</button></i></p>
      <div class="select-box">
        <div>
          <input type="radio" name="childInfo" id="childAutomatic"/>
          <label for="childAutomatic">自动识别</label>
        </div>
        <div>
          <input type="radio" name="childInfo" id="childManual" checked />
          <label for="childManual">手动输入</label>
        </div>
      </div>
      <div class="automatic-box spot-box" style="display:none;">
        <p>请将身份证放置在感应区</p>
      </div>
      <div class="spot-box manual-box">
        <div>
          <span>姓名：</span><input id="id_child_name" type="text" placeholder="请输入本人身份证姓名">
        </div>
        <div>
          <span>身份证：</span><input type="text" id="id_child_no" placeholder="请输入身份证号">
        </div>
      </div>
      <div class="child-prompt">
        <h3>请选择儿童出生日期</h3>
        <div id="date">
          <select name="year" id="year">
            <option value="">选择年份</option>
          </select>
          <span>年</span>
          <select name="month" id="month">
            <option value="">选择月份</option>
          </select>
          <span>月</span>
          <select id="days" class="day">
            <option value="">选择日期</option>
          </select>
          <span>日</span>
        </div>
        <p>
          1.每名成年游客可免费携带一名身高不足1.2米的儿童，该儿童可不用购票及填写相关信息。携带的其他儿童身高不足1.2米也须购儿童票。</br>
          2. 身高1.2米—1.5米儿童可购儿童票，但须跟成人票一起购买，使用同行成人证件购票并凭此证件取票。</br>
          4.身高超1.5米的儿童须购全价票。因儿童无有效证件，此类票只能在线下售票窗口购买。</br>
          备注：请根据儿童实际身高购票，平台不承担因儿童身高与所购车票不符而无法入园的责任。
        </p>
      </div>
    </div>
    <div>
      <div class="add-btn">
        <button class="add-adult-btn"><i>+</i>添加成人票</button>
        <button class="add-child-btn"><i>+</i>添加儿童票</button>
      </div>
    </div>
  </div>
  <div class="blank gray-box"></div>
  <div class="pa-l-r contact-box">
    <h5>联系方式</h5>
    <div>
      <input type="tel" placeholder="请输入手机号码">
    </div>
  </div>
  <div class="blank gray-box"></div>
  <div class="pa-l-r num-box">
    <h5>订单数量</h5>
    <div>
      <span>成人票</span>
      <p>¥<b>112.00</b><i>X1</i></p>
    </div>
    <div>
      <span>儿童票</span>
      <p>¥<b>81.00</b><i>X1</i></p>
    </div>
  </div>
</div>
<div class="blank gray-box"></div>
<div class="footer white-box pa-l-r">
  <p>订单总额 <span>¥<i>650.00</i></span></p>
  <button class="btn orange-btn">提交订单</button>
</div>
</body>
<script src="../../assets/plugin/jquery.min.js"></script>
<script src="../../assets/js/selectDate.js"></script>
<script>
  $(function(){
    $('#adultAutomatic').click(function () {
      $(this).parent().parent().nextAll('.manual-box').hide()
      $(this).parent().parent().nextAll('.automatic-box').show()
    })
    $('#adultManual').click(function () {
      $(this).parent().parent().nextAll('.manual-box').show()
      $(this).parent().parent().nextAll('.automatic-box').hide()
    })
    $('#childAutomatic').click(function () {
      $(this).parent().parent().nextAll('.manual-box').hide()
      $(this).parent().parent().nextAll('.automatic-box').show()
    })
    $('#childManual').click(function () {
      $(this).parent().parent().nextAll('.manual-box').show()
      $(this).parent().parent().nextAll('.automatic-box').hide()
    })
    // 添加删除
    $('.add-child-btn').click(function () {
      $('.add-child').show()
    })
    $('.add-adult-btn').click(function () {
     $('.add-adult').show()
    })
    $('.add-info p .cancel-btn').click(function () {
      console.log(2)
      $(this).parent().parent().parent('.add-info').hide()
    })
    //日期选择
    $("#date").selectDate()

    $("#days").focusout(function(){
      var year = $("#year option:selected").html()
      var month = $("#month option:selected").html()
      var day = $("#days option:selected").html()
      console.log(year+month+day)
    })
    // 成人验证
    var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;//身份证号正则
    var regName =/^[\u4e00-\u9fa5]{2,4}$/;//验证是否2-4位中文
    $('.add-adult .confirm-btn').click(function () {
      if ($('#adultManual').is(':checked')){
        var idNo = $('#id_adult_no').val();
        var name=$('#id_adult_name').val()
        if(!regName.test(name)){
          alert('真实姓名填写有误');
          return false;
        }
        if(!regIdNo.test(idNo)){
          alert('身份证号填写有误');
          return false;
        }
      }
    })
    //儿童
    $('.add-child .confirm-btn').click(function () {
      if ($('#childManual').is(':checked')){
        var idNo = $('#id_child_no').val();
        var name=$('#id_child_name').val()
        if(!regName.test(name)){
          alert('真实姓名填写有误');
          return false;
        }
        if(!regIdNo.test(idNo)){
          alert('身份证号填写有误');
          return false;
        }
      }
    })
    //提交
    $('.footer .btn').click(function () {
      window.location.href="confirm.html";
    })
  })
</script>
</html>
